<template>
  <a-spin :spinning="confirmLoading">
    <!-- <j-form-container :disabled="formDisabled"> -->
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="导出条数" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              type="number"
              :min="0"
              v-model="exportSize"
              placeholder="请输入"
              allowClear
              oninput="value=value.replace(/[^\d]/g,'')"
            />
            <span style="color: #999">提示：根据输入的数量进行导出，不输入时默认导出筛选条件的全部数量</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <table class="table" width="100%" border="0">
            <tbody>
              <tr>
                <td width="180">
                  <a-checkbox :checked="checkAll" @change="onCheckAllChange"> 全部 </a-checkbox>
                </td>
                <td></td>
              </tr>
              <tr v-for="(item, index) in fieldArr" :key="index">
                <td>
                  <a-checkbox v-model="item.checkAll" @change="(val) => onCheckItemChange(val, item)">{{
                    item.title
                  }}</a-checkbox>
                </td>
                <td>
                  <a-checkbox-group v-model="item.checkedList" @change="(val) => onChange(val, item)">
                    <a-row :gutter="[16,16]" type="flex">
                      <template v-for="(obj, index) in item.arr">
                        <a-col :span="6" :key="index">
                          <a-checkbox :key="obj.field" :value="obj.field">
                            {{ obj.label }}
                          </a-checkbox>
                        </a-col>
                      </template>
                    </a-row>
                  </a-checkbox-group>
                </td>
              </tr>
            </tbody>
          </table>
        </a-col>
        <!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
          <a-button @click="submitForm">提 交</a-button>
        </a-col> -->
      </a-row>
    <!-- </j-form-container> -->
  </a-spin>
</template>

<script>
import { exportXls } from '@/api/warning/WarningData.js'
import { downLoadMix } from '@/utils/export-util/util'

export default {
  name: 'ExportForm',
  props: {
    formData: {
      type: Object,
      default: () => {},
      required: false,
    },
    normal: {
      type: Boolean,
      default: false,
      required: false,
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      exportSize: null,
      indeterminate: false,
      checkAll: true,
      fieldArr: [
        {
          title: '列表字段',
          arr: [
            { field: 'warningNumber', label: '预警编号' },
            { field: 'victimPhone', label: '受害人手机号' },
            { field: 'warningLevel', label: '预警等级' },
            { field: 'fraudType', label: '诈骗类型' },
            { field: 'warningTime', label: '预警时间' },
            // { field: 'domainQrcode', label: '涉诈域名二维码' },
            { field: 'latestLocation', label: '最新位置' },
            { field: 'latestLocationTime', label: '最新位置时间' },
            { field: 'dissuadeStatus', label: '劝阻状态' },
            { field: 'feedbackResultString', label: '劝阻结果' },
            { field: 'firstLocation', label: '入库位置' },
            { field: 'firstTime', label: '位置时间' },
          ],
        },
        { title: '详情字段', arr: [
          { field: 'victimName', label: '受害人姓名' },
          { field: 'batchNumber', label: '批次号' },
          { field: 'victimIdCard', label: '受害人身份证号' },
          { field: 'victimBankCard', label: '受害人银行卡号' },
          { field: 'victimAlipayAccount', label: '受害人支付宝账号' },
          { field: 'victimWechatAccount', label: '受害人微信账号' },
          { field: 'victimQqNumber', label: '受害人QQ号' },
          { field: 'belongProv', label: '归属省份' },
          { field: 'belongCity', label: '归属城市' },
          { field: 'prov', label: '省级' },
          { field: 'city', label: '地级' },
          { field: 'district', label: '县级' },
          { field: 'township', label: '乡级' },
          { field: 'village', label: '村级' },
          { field: 'orgDeptCname', label: '机构/部门' },
          { field: 'positioningBasis', label: '定位依据' },
          { field: 'sourceFromName', label: '数据来源' },
          { field: 'ployCode', label: '策略编码' },
          { field: 'receiverCname', label: '接收人' },
          { field: 'receiveStatus', label: '接收状态' },
          { field: 'receivingTime', label: '接收时间' },
          { field: 'accessDomainName', label: '涉诈网站' },
          { field: 'responseCode', label: '响应码' },
          { field: 'siteTitle', label: '涉诈网站标题' },
          // { field: 'siteScreenshotUrl', label: '涉诈网站截图' },
          { field: 'screenshotTime', label: '截图时间' },
          { field: 'disposalMethod', label: '处置方式' },
          { field: 'dissuadeUser', label: '劝阻账号' },
          { field: 'flagVeriry', label: '反馈验证' },
          { field: 'feedbackTime', label: '反馈处理时间' },
          { field: 'feedbackResultContent', label: '劝阻内容' },
          { field: 'lastConcatTime', label: '最近联系时间' },
          { field: 'releaseTime', label: '下发时间' },
          { field: 'belongBank', label: '归属地运营商' },
          { field: 'numberCalls', label: '通话次数' },
          { field: 'durationCalls', label: '通话时长' },
          { field: 'tradeTime', label: '交易时间' },
          { field: 'tradeAmount', label: '交易金额' },
          { field: 'tradeLocation', label: '交易发生地' },
          { field: 'tradeResult', label: '交易结果' },
          { field: 'suspectsCname', label: '嫌疑人姓名' },
          { field: 'suspectsIdNumber', label: '嫌疑人身份证号' },
          { field: 'suspectsPhoneNumber', label: '嫌疑人电话号码' },
          { field: 'suspectsBankAccount', label: '嫌疑人银行账号' },
          { field: 'suspectsAlipayAccount', label: '嫌疑人支付宝账号' },
          { field: 'suspectsWechatAccount', label: '嫌疑人微信账号' },
          { field: 'suspectsQqNumber', label: '嫌疑人QQ号' },
          { field: 'lockOperatorName', label: '用锁对象' },
          { field: 'useLockWay', label: '用锁方式' },
          { field: 'lockForUserName', label: '被锁对象' },
          { field: 'historyReceiver', label: '历史接收' }
        ] },
      ],
      checkedLists: [],
      getSelectKeyDatas: [],
      warningDataDetailQueryVO: {}
    }
  },
  computed: {
    // formDisabled() {
    //   if (this.normal === false) {
    //     if (this.formData.disabled === false) {
    //       return false
    //     } else {
    //       return true
    //     }
    //   }
    //   return this.disabled
    // },
    // showFlowSubmitButton() {
    //   if (this.normal === false) {
    //     if (this.formData.disabled === false) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   } else {
    //     return false
    //   }
    // },
    allFields() {
      let datas = []
      for (let index in this.fieldArr) {
        if (this.fieldArr[index].arr) {
          datas = datas.concat(this.fieldArr[index].arr)
        }
      }
      return datas
    }
  },
  watch: {
    fieldArr: {
      immediate: true,
      deep: true,
      handler(val) {
        let arr = val.map((i) => i.checkedList).filter((obj) => obj !== undefined)
        this.checkedLists = this.flatten(arr)
        if (this.checkedLists.length === this.allFields.length) {
          Object.assign(this, { checkAll: true })
        } else {
          Object.assign(this, { checkAll: false })
        }
      }
    }
  },
  created() {
    // 初始化全选
    let e = { target: { checked: true } }
    this.onCheckAllChange(e)
  },
  methods: {
    show(record) {},
    submitForm() {
      let params = {
        warningDataDetailQueryVO: this.warningDataDetailQueryVO,
        exportFields: this.checkedLists,
        exportSize: this.exportSize,
        idList: this.getSelectKeyDatas
      }
      this.confirmLoading = true
      exportXls(params).then(async res => {
        if(res && res.size>0) {
          const fileName = '预警速报.xls'
          await downLoadMix(res, fileName)
          this.confirmLoading = false
          this.$emit('ok')
        } else {
          this.$message.warn("导出失败！")
        }
      })
    },
    onCheckAllChange(e) {
      let checkedList = this.allFields.map((i) => i.field).filter((obj) => obj !== undefined)
      let fieldArr = JSON.parse(JSON.stringify(this.fieldArr))
      fieldArr.forEach((element) => {
        element.checkedList = e.target.checked ? element.arr.map((i) => i.field) : []
        element.checkAll = e.target.checked
      })
      Object.assign(this, {
        checkAll: e.target.checked,
        checkedList: e.target.checked ? checkedList : [],
        fieldArr: fieldArr,
      })
    },
    onCheckItemChange(val, item) {
      if (val.target.checked) {
        item.checkedList = item.arr.map((i) => i.field)
      } else {
        item.checkedList = []
      }
    },
    onChange(checkedList, item) {
      item.checkAll = checkedList.length === item.arr.length
    },
    flatten(arr) {
      return arr.reduce((prev, next) => {
        return prev.concat(Array.isArray(next) ? this.flatten(next) : next)
      }, [])
    },
    // itemIndeterminate(item) {
    //   return item.allKeys.some(v => this.fieldArr.indexOf(v) > -1) && !item.allKeys.every(v => this.fieldArr.indexOf(v) > -1)
    // }
  }
}
</script>
<style lang="less" scoped>
@color: #e8e8e8;
.table {
  border:1px solid @color;
  tr {
    td {
      padding: 8px;
      border-left:1px solid @color;
      border-bottom:1px solid @color;
      &:first-child {
        background-color: #81d3f82a;
        border-left-width:0;
      }
    }
    &:last-child {
      td {
        border-bottom-width:0;
      }
    }
  }
}
</style>
